<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>自推广消费明细</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body>
<div id="blank" class="header">
    <div v-back.tapmode class="back small"></div>
    <span class="title">自推广消费明细</span>
</div>
<div id="app" class="consume-container" v-cloak>
    <div class="spread-consume-body" style="position: fixed;left: 0; top:60px;right:0;z-index:10; ">
        <div class="consume-header">
            <div class="consume consume-left">
                <p class="red-top">{{satisfy_count}}</p>
                <p class="red-bottom">自消费满足人数</p>
            </div>
            <div class="consume consume-right">
                <p class="red-top">{{unsatisfy_count}}</p>
                <p class="red-bottom">自消费未满足人数</p>
            </div>
        </div>
        <div class="consume-body">
            <div class="consume-body-top">
                <span>自推广会员列表<span>{{memberType}}</span></span>
                <img src="../../image/big/spread_consume_select.png" v-myclick="modalFilter"/>
            </div>
        </div>
    </div>
    <!--筛选modal-->
    <div class="modal-filter" v-show="showModalFilter">
        <p v-myclick="[1,memberSelect]">自消费满足会员</p>
        <p v-myclick="[2,memberSelect]">自消费未满足会员</p>
        <p v-myclick="[0,memberSelect]">全部会员</p>
    </div>
    <div class="row-list">
        <div class="row-consume" v-for="item in list">
            <div class="row-left">
                <img :src="item.portrait || '../../image/portrait_moren.png'"/>
            </div>
            <div class="row-right">
                <p class="row-p" style="padding-bottom: 6px;">{{item.nickname}}</p>
                <p class="row-p">
                    <span class="p-left">自消费：{{item.consume}}元</span>
                    <span class="p-right">团队消费：{{item.team_consume}}元</span>
                </p>
                <p class="row-p">
                    <span class="p-left">还差消费：<span style="color: orangered;">{{item.need_consume}}</span>元</span>
                    <span class="p-right">还差消费：<span style="color: orangered;">{{item.need_team_consume}}</span>元</span>
                </p>
            </div>
        </div>
        <lazy-load
                style="margin:10px 0"
                v-if="list.length > 0"
                count-per-page="20"
                :arr="list"
                :url="url"
                ret-attr="members"
                :other-datas="{state:state}"
        >
        </lazy-load>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>
<script>

    var vm,list;
    var satisfy_count;
    var unsatisfy_count;
    apiready = function () {
        setBSImg();
        new Vue({
            el: "#blank"
        });
        var data = {
            member_id: getPrefs('member_id'),
            state: 0,
        };
        var callback = function (ret) {
            list = ret.content.members;
            satisfy_count = ret.content.satisfy_count;
            unsatisfy_count = ret.content.unsatisfy_count;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.extendConsumeDetail, data, callback);
        addListeners();
    };
    function initApp() {
        vm = new Vue({
            el: "#app",
            data: {
                showModalFilter: false,
                state: 0,
                list: list,
                satisfy_count: satisfy_count,
                unsatisfy_count: unsatisfy_count,
                url:URL.extendConsumeDetail,
            },
            computed:{
                memberType:function () {
                    switch (this.state) {
                        case 0:
                            return;
                        case 1:
                            return '(自消费满足)';
                        case 2:
                            return '(自消费未满足)'
                    }
                }
            },
            methods: {
                modalFilter: function () {
                    this.showModalFilter = !this.showModalFilter;
                },
                memberSelect:function (type) {
                    this.state = type;
                    var data = {
                        member_id:getPrefs('member_id'),
                        state:type,
                    };
                    var callback = function (ret) {
                        vm.list = ret.content.members;
                    };
                    pinet.post(this.url, data, callback);
                    this.showModalFilter = false;
                },
            }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }


</script>
</html>